欧洲高清无码在线_日韩一区中文无码_亚洲欧洲非洲在线观看_国模无码一区二区三区不卡

 
技術博客INFO
聯(lián)系我們CONTACT

公司地址：茂名市人民南路新村大院22號101

電話：13592986386

VUE 的一些常用外部組件學習日志您當前的位置：首頁 > VUE 的一些常用外部組件學習日志

VUE 的一些常用外部組件學習日志

發(fā)布時間：2024/9/5 15:52:50


echarts  采用畫圖


Vue.js（讀音 /vjuː/, 類似于 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 采用自底向上增量開發(fā)的設計。
Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學習起來非常簡單，本教程基于 Vue 2.1.8 版本測試，Vue3 請參閱 Vue3 教程。
<div id="app">
    <p v-if="seen">現(xiàn)在你看到我了</p>
    <template v-if="ok">
      <h1>菜鳥教程</h1>
      <p>學的不僅是技術，更是夢想！</p>
      <p>哈哈哈，打字辛苦啊！。</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>






<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>


 GoJS 圖形實例
GoJS是一個用于創(chuàng)建交互式可視化圖表和圖形的JavaScript庫。它提供了豐富的功能和工具，使開發(fā)人員能夠輕松地構建各種類型的圖表，包括流程圖、組織結構圖、網(wǎng)絡拓撲圖等。GoJS具有靈活的布局和樣式設置，可以通過簡單的API來實現(xiàn)圖表的創(chuàng)建和操作。




vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。
vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑
router.map({
'/home': { component: Home },
'/about': { component: About }
})




SweetAlert2是一款功能強大的純Js模態(tài)消息對話框插件。SweetAlert2用于替代瀏覽器默認的彈出對話框，它提供各種參數(shù)和方法，支持嵌入圖片，背景，HTML標簽等，SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標簽的問題，并對彈出對話框進行了優(yōu)化，同時提供對各種表單元素的支持，還增加了5種情景模式的模態(tài)對話框，功能非常強大
 Swal('hello world')


swal({
            title: '提示',
            text: "早上好",
            confirmButtonText: '確認',
            confirmButtonColor: 'Green',
        })


 swal({
            title: '確定?',
            text: '您將無法恢復此文件!',
            type: '警告',
            showCancelButton: true,
            confirmButtonText: '確定,刪除',
            cancelButtonText: '取消',
        }).then(function(isConfirm) {
            if (isConfirm.value) {
                swal(
                        '已刪除!',
                        '文件已刪除',
                        'success'
                );
            }
        });